<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=750, user-scalable=0">
    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
    <meta http-equiv="Pragma" content="no-cache" />
    <meta http-equiv="Expires" content="0" />
    <title>需要搬运</title>
    <link rel="stylesheet" href="__PUBLIC__/css/weui.css">
    <link rel="stylesheet" href="__PUBLIC__/css/jquery-weui.min.css">
    <link href="__PUBLIC__/css/style.css" rel="stylesheet">
</head>

<body>
    <div class="layout fixed" id="page-home">
        <header>
            <a href="#" class="header-address">青岛</a>
            <h1>挪窝儿</h1>
        </header>
        <form class="am-form" action="__CONTROLLER__/orders">
        <div class="address-bd" id="chufa">
            <div class="address-input clearfix">
                <div class="fl ico ico-address"></div>
                <input type="text" class="fl tm-input startAdd" id="startAdd" name="startAdd" placeholder="输入出发地">
            </div>
            <div class="address-option">
                <span class="name">电梯</span>
                <input class="weui_switch" type="checkbox" name="options[notarized]">
                <div class="ceng">
                    <input type="text" id="chufaceng" value="1" name="shigh">
                    <span class="dw">层</span>
                </div>
            </div>
        </div>
        <div class="address-bd" id="mudi">
            <div class="address-input clearfix">
                <div class="fl ico ico-address"></div>
                <input type="text" class="fl tm-input endAdd"  id="endAdd" name="endAdd" placeholder="输入目的地">
            </div>
            <div class="address-option">
                <span class="name">电梯</span>
                <input class="weui_switch" type="checkbox" name="options[images]">
                <div class="ceng">
                    <input type="text" id="mudiceng" value="1" name="ehigh">
                    <span class="dw">层</span>
                </div>
            </div>
        </div>
        <div class="ban-list">
            <div class="ban-item">
                <div class="fl ico ico-xl"></div>
                <input type="text" id="select-js" placeholder="选择行李件数">
                <a href="javascript:jsbz();" class="link-jsbz">计算标准</a>
            </div>
            <div class="ban-item" id="select-jj">
                <div class="fl ico ico-bx">
                </div>
                <span class="option-jj">如有大件家电家具请选择</span>
            </div>
            <div class="ban-item on" id="select-cart">
                <div class="fl ico ico-cart">
                </div>
                <span class="option-cart">面包车</span>
                <a href="javascript:;;" class="gg" id="change_cart">更改</a>
            </div>
            <div class="ban-item">
                <div class="fl ico ico-time">
                </div>
                <input type="text" id="select-time" name="appDate" placeholder="请选择日期和时间" />
            </div>
            <div class="ban-item">
                <div class="fl ico ico-tel">
                </div>
                <input type="tel" name="mphone" class="input-tel" placeholder="请填写您的联系电话 ">
            </div>
            <div class="ban-item">
                <div class="fl ico ico-name">
                </div>
                <input type="text" name="name" class="input-name" placeholder="怎么称呼 （姓名）">
            </div>
        </div>
        <div class="beizhu">
            <textarea name="" id="" cols="30" placeholder="用户备注"></textarea>
        </div>
        <div class="confirm-order">
            <div class="order-info">
                <div class="price fl">
                    <span class="fh">￥</span>
                    <span class="jg">156</span>
                    <span class="gl" id="dst">0公里</span>
                </div>
                <div class="fr">
                    <div class="fr-item">
                        <span>车&nbsp;&nbsp;&nbsp;费：</span>35元
                    </div>
                    <div class="fr-item">
                        <span>搬运费：</span>36元
                    </div>
                </div>
            </div>
            <button class="btn-confirm">确认订单</button>
        </div>
        <div id="jsbz" class="hide">
        	<div class="box">
        		<a href="javascript:close();" class="close"></a>
        		<img src="__PUBLIC__/img/raw_1468482878.png" width="600" alt="" style="max-width: 90%">
        	</div>
        </div>
        </form>
    </div>
    
    <div class="layout fixed2" id="page-select-car" style="display: none;">
        <header>
            <a href="javascript:back();" class="link-left">返回</a>
        </header>
        <div class="xl-list">
            <div class="xl-item">
                <div class="pic">
                    <img src="img/aaa.png" alt="">
                </div>
                <div class="bd">
                    滚筒洗衣机
                </div>
                <div class="select-num">
                    <div class="jian hide"><i class="iconfont">&#xe760;</i></div>
                    <input type="text" value="0" class="num hide"  readonly="readonly">
                    <div class="add"><i class="iconfont">&#xe610;</i></div>
                </div>
            </div>
            <div class="xl-item">
                <div class="pic">
                    <img src="img/aaa.png" alt="">
                </div>
                <div class="bd">
                    波轮洗衣机
                </div>
                <div class="select-num">
                    <div class="jian hide"><i class="iconfont">&#xe760;</i></div>
                    <input type="text" value="0" class="num hide"  readonly="readonly">
                    <div class="add"><i class="iconfont">&#xe610;</i></div>
                </div>
            </div>
            <div class="xl-item">
                <div class="pic">
                    <img src="img/aaa.png" alt="">
                </div>
                <div class="bd">
                    普通洗衣机
                </div>
                <div class="select-num">
                    <div class="jian hide"><i class="iconfont">&#xe760;</i></div>
                    <input type="text" value="0" class="num hide"  readonly="readonly">
                    <div class="add"><i class="iconfont">&#xe610;</i></div>
                </div>
            </div>
        </div>
        <div class="xl-list">
            <div class="xl-item">
                <div class="pic">
                    <img src="img/aaa.png" alt="">
                </div>
                <div class="bd">
                    双门冰箱高 1m-1.7m
                </div>
                <div class="select-num">
                    <div class="jian hide"><i class="iconfont">&#xe760;</i></div>
                    <input type="text" value="0" class="num hide"  readonly="readonly">
                    <div class="add"><i class="iconfont">&#xe610;</i></div>
                </div>
            </div>
            <div class="xl-item">
                <div class="pic">
                    <img src="img/aaa.png" alt="">
                </div>
                <div class="bd">
                    双门或三门冰箱高 1.7m以上
                </div>
                <div class="select-num">
                    <div class="jian hide"><i class="iconfont">&#xe760;</i></div>
                    <input type="text" value="0" class="num hide"  readonly="readonly">
                    <div class="add"><i class="iconfont">&#xe610;</i></div>
                </div>
            </div>
            <div class="xl-item">
                <div class="pic">
                    <img src="img/aaa.png" alt="">
                </div>
                <div class="bd">
                    单门小冰箱 1m以下
                </div>
                <div class="select-num">
                    <div class="jian hide"><i class="iconfont">&#xe760;</i></div>
                    <input type="text" value="0" class="num hide"  readonly="readonly">
                    <div class="add"><i class="iconfont">&#xe610;</i></div>
                </div>
            </div>
        </div>
        <div class="xl-list">
            <div class="xl-item">
                <div class="pic">
                    <img src="img/aaa.png" alt="">
                </div>
                <div class="bd">
                    双人床
                </div>
                <div class="select-num">
                    <div class="jian hide"><i class="iconfont">&#xe760;</i></div>
                    <input type="text" value="0" class="num hide"  readonly="readonly">
                    <div class="add"><i class="iconfont">&#xe610;</i></div>
                </div>
            </div>
            <div class="xl-item">
                <div class="pic">
                    <img src="img/aaa.png" alt="">
                </div>
                <div class="bd">
                    单人床
                </div>
                <div class="select-num">
                    <div class="jian hide"><i class="iconfont">&#xe760;</i></div>
                    <input type="text" value="0" class="num hide"  readonly="readonly">
                    <div class="add"><i class="iconfont">&#xe610;</i></div>
                </div>
            </div>
            <div class="xl-item">
                <div class="pic">
                    <img src="img/aaa.png" alt="">
                </div>
                <div class="bd">
                    双人床垫
                </div>
                <div class="select-num">
                    <div class="jian hide"><i class="iconfont">&#xe760;</i></div>
                    <input type="text" value="0" class="num hide"  readonly="readonly">
                    <div class="add"><i class="iconfont">&#xe610;</i></div>
                </div>
            </div>
            <div class="xl-item">
                <div class="pic">
                    <img src="img/aaa.png" alt="">
                </div>
                <div class="bd">
                    单人床垫
                </div>
                <div class="select-num">
                    <div class="jian hide"><i class="iconfont">&#xe760;</i></div>
                    <input type="text" value="0" class="num hide"  readonly="readonly">
                    <div class="add"><i class="iconfont">&#xe610;</i></div>
                </div>
            </div>
        </div>
        <p class="tips">其他未列出家居请选择件数并用文字描述</p>
        <div class="dxl-list">
            <div class="dxl-item">
                <div class="hd">
                    <div class="pic">
                        <img src="img/aaa.png" alt="">
                    </div>
                    <div class="title">
                        一人可搬动的家具
                    </div>
                    <div class="select-num">
                        <div class="jian hide"><i class="iconfont">&#xe760;</i></div>
                        <input type="text" value="0" class="num hide"  readonly="readonly"="">
                        <div class="add"><i class="iconfont">&#xe610;</i></div>
                    </div>
                </div>
                <div class="bd hide">
                	<textarea name="" id="" cols="30" rows="10" placeholder="一个人可以搬动的家具，比如椅子，单人沙发，床头柜，镜子等，选择件数后请在此添加文字描述"></textarea>
                </div>
            </div>
            <div class="dxl-item">
                <div class="hd">
                    <div class="pic">
                        <img src="img/aaa.png" alt="">
                    </div>
                    <div class="title">
                        需要两人一起搬动的家具
                    </div>
                    <div class="select-num">
                        <div class="jian hide"><i class="iconfont">&#xe760;</i></div>
                        <input type="text" value="0" class="num hide"  readonly="readonly"="">
                        <div class="add"><i class="iconfont">&#xe610;</i></div>
                    </div>
                </div>
                <div class="bd hide">
                	<textarea name="" id="" cols="30" rows="10"></textarea>
                </div>
            </div>
        </div>
        <div class="confirm-order">
            <button class="btn-confirm">确认提交</button>
        </div>
    </div>
    
    <div class="layout fixed2" id="page-select-dxl" style="display: none;">
        <header>
            <a href="javascript:back();" class="link-left">返回</a>
        </header>
        <div class="xl-list">
            <div class="xl-item">
                <div class="pic">
                    <img src="__PUBLIC__/img/aaa.png" alt="">
                </div>
                <div class="bd">
                    滚筒洗衣机
                </div>
                <div class="select-num">
                    <div class="jian hide"><i class="iconfont">&#xe760;</i></div>
                    <input type="text" value="0" class="num hide"  readonly="readonly">
                    <div class="add"><i class="iconfont">&#xe610;</i></div>
                </div>
            </div>
            <div class="xl-item">
                <div class="pic">
                    <img src="__PUBLIC__/img/aaa.png" alt="">
                </div>
                <div class="bd">
                    波轮洗衣机
                </div>
                <div class="select-num">
                    <div class="jian hide"><i class="iconfont">&#xe760;</i></div>
                    <input type="text" value="0" class="num hide"  readonly="readonly">
                    <div class="add"><i class="iconfont">&#xe610;</i></div>
                </div>
            </div>
            <div class="xl-item">
                <div class="pic">
                    <img src="__PUBLIC__/img/aaa.png" alt="">
                </div>
                <div class="bd">
                    普通洗衣机
                </div>
                <div class="select-num">
                    <div class="jian hide"><i class="iconfont">&#xe760;</i></div>
                    <input type="text" value="0" class="num hide"  readonly="readonly">
                    <div class="add"><i class="iconfont">&#xe610;</i></div>
                </div>
            </div>
        </div>
        <div class="xl-list">
            <div class="xl-item">
                <div class="pic">
                    <img src="__PUBLIC__/img/aaa.png" alt="">
                </div>
                <div class="bd">
                    双门冰箱高 1m-1.7m
                </div>
                <div class="select-num">
                    <div class="jian hide"><i class="iconfont">&#xe760;</i></div>
                    <input type="text" value="0" class="num hide"  readonly="readonly">
                    <div class="add"><i class="iconfont">&#xe610;</i></div>
                </div>
            </div>
            <div class="xl-item">
                <div class="pic">
                    <img src="__PUBLIC__/img/aaa.png" alt="">
                </div>
                <div class="bd">
                    双门或三门冰箱高 1.7m以上
                </div>
                <div class="select-num">
                    <div class="jian hide"><i class="iconfont">&#xe760;</i></div>
                    <input type="text" value="0" class="num hide"  readonly="readonly">
                    <div class="add"><i class="iconfont">&#xe610;</i></div>
                </div>
            </div>
            <div class="xl-item">
                <div class="pic">
                    <img src="__PUBLIC__/img/aaa.png" alt="">
                </div>
                <div class="bd">
                    单门小冰箱 1m以下
                </div>
                <div class="select-num">
                    <div class="jian hide"><i class="iconfont">&#xe760;</i></div>
                    <input type="text" value="0" class="num hide"  readonly="readonly">
                    <div class="add"><i class="iconfont">&#xe610;</i></div>
                </div>
            </div>
        </div>
        <div class="xl-list">
            <div class="xl-item">
                <div class="pic">
                    <img src="__PUBLIC__/img/aaa.png" alt="">
                </div>
                <div class="bd">
                    双人床
                </div>
                <div class="select-num">
                    <div class="jian hide"><i class="iconfont">&#xe760;</i></div>
                    <input type="text" value="0" class="num hide"  readonly="readonly">
                    <div class="add"><i class="iconfont">&#xe610;</i></div>
                </div>
            </div>
            <div class="xl-item">
                <div class="pic">
                    <img src="__PUBLIC__/img/aaa.png" alt="">
                </div>
                <div class="bd">
                    单人床
                </div>
                <div class="select-num">
                    <div class="jian hide"><i class="iconfont">&#xe760;</i></div>
                    <input type="text" value="0" class="num hide"  readonly="readonly">
                    <div class="add"><i class="iconfont">&#xe610;</i></div>
                </div>
            </div>
            <div class="xl-item">
                <div class="pic">
                    <img src="__PUBLIC__/img/aaa.png" alt="">
                </div>
                <div class="bd">
                    双人床垫
                </div>
                <div class="select-num">
                    <div class="jian hide"><i class="iconfont">&#xe760;</i></div>
                    <input type="text" value="0" class="num hide"  readonly="readonly">
                    <div class="add"><i class="iconfont">&#xe610;</i></div>
                </div>
            </div>
            <div class="xl-item">
                <div class="pic">
                    <img src="__PUBLIC__/img/aaa.png" alt="">
                </div>
                <div class="bd">
                    单人床垫
                </div>
                <div class="select-num">
                    <div class="jian hide"><i class="iconfont">&#xe760;</i></div>
                    <input type="text" value="0" class="num hide"  readonly="readonly">
                    <div class="add"><i class="iconfont">&#xe610;</i></div>
                </div>
            </div>
        </div>
        <p class="tips">其他未列出家居请选择件数并用文字描述</p>
        <div class="dxl-list">
            <div class="dxl-item">
                <div class="hd">
                    <div class="pic">
                        <img src="__PUBLIC__/img/aaa.png" alt="">
                    </div>
                    <div class="title">
                        一人可搬动的家具
                    </div>
                    <div class="select-num">
                        <div class="jian hide"><i class="iconfont">&#xe760;</i></div>
                        <input type="text" value="0" class="num hide"  readonly="readonly"="">
                        <div class="add"><i class="iconfont">&#xe610;</i></div>
                    </div>
                </div>
                <div class="bd hide">
                	<textarea name="" id="" cols="30" rows="10" placeholder="一个人可以搬动的家具，比如椅子，单人沙发，床头柜，镜子等，选择件数后请在此添加文字描述"></textarea>
                </div>
            </div>
            <div class="dxl-item">
                <div class="hd">
                    <div class="pic">
                        <img src="__PUBLIC__/img/aaa.png" alt="">
                    </div>
                    <div class="title">
                        需要两人一起搬动的家具
                    </div>
                    <div class="select-num">
                        <div class="jian hide"><i class="iconfont">&#xe760;</i></div>
                        <input type="text" value="0" class="num hide"  readonly="readonly"="">
                        <div class="add"><i class="iconfont">&#xe610;</i></div>
                    </div>
                </div>
                <div class="bd hide">
                	<textarea name="" id="" cols="30" rows="10"></textarea>
                </div>
            </div>
        </div>
        <div class="confirm-order">
            <button class="btn-confirm">确认提交</button>
        </div>
    </div>
    
    
    
    <script src="__PUBLIC__/js/jquery.min.js"></script>
    <script src="__PUBLIC__/js/jquery-weui.min.js"></script>
    <script src="__PUBLIC__/js/webapp.js"></script>
    <!--<script src="__PUBLIC__/js/elavator.js"></script>-->
    
    <!-- 百度地图 -->
   
	<script type="text/javascript"
		src="http://api.map.baidu.com/api?v=2.0&ak=cRIblrzawnZeT319eL3dLssL"></script>
	<script src="__PUBLIC__/js/map.js"></script>
    
    <script>
		//传ajax
		function chuanAjax() {
			$.post("__CONTROLLER__/banYun", {
				sAdress : $("#startAdd").val(),
				eAdress : $("#endAdd").val(),
				car : $("#car").val(),
				dst : $('#dst').html(),
				fb:$("#costFb").val(),
			}, function(data, status) {
				$("#cost").html(data);
				$("#costInput").val(data);
			});
		}
		
		
	$(document).ready(function(){
			
		//进度条
		//var progress = $.AMUI.progress;
		$("#startAdd,#endAdd").bind("blur",function(){
			$("#dst").html("100");
			var startAdd = $("#startAdd").val();
			var endAdd = $("#endAdd").val();
			//如果起始地点和目的地都填了值，那么就去调用
			if (startAdd != "" && endAdd != "") {
				//转圈 
				
				//progress.start();
				var map = new BMap.Map("l-map");
				
				var output = "";
				var searchComplete = function(results) {
					if (transit.getStatus() != BMAP_STATUS_SUCCESS) {
						return;
					}
					var plan = results.getPlan(0);
					//output += plan.getDuration(true); //获取时间
					output += plan.getDistance(true); //获取距离
					$("#dst").html(output);

				}
				var transit = new BMap.DrivingRoute(map, {
					renderOptions : {
						map : map
					},
					onSearchComplete : searchComplete,
					onPolylinesSet : function() {
						$("#dst").html(output);
						//chuanAjax();
						//progress.done();
					}
				});
				transit.search(startAdd, endAdd);
			}
			
			
		});
		
		//$("#startAdd").bind('blur', function(){
//			$("#gl").html("100");
//			// $("#dst,#cost").html("--");
//			////实时传送数据propertychange input 
////			var startAdd = $("#startAdd").val();
////			var endAdd = $("#endAdd").val();
////			//如果起始地点和目的地都填了值，那么就去调用
////			if (startAdd != "" && endAdd != "") {
////				//转圈 
////				//progress.start();
////				var map = new BMap.Map("l-map");
////				var output = "";
////				var searchComplete = function(results) {
////					if (transit.getStatus() != BMAP_STATUS_SUCCESS) {
////						return;
////					}
////					var plan = results.getPlan(0);
////					//output += plan.getDuration(true); //获取时间
////					output += plan.getDistance(true); //获取距离
////					$("#dst").html(output);
////
////				}
////				var transit = new BMap.DrivingRoute(map, {
////					renderOptions : {
////						map : map
////					},
////					onSearchComplete : searchComplete,
////					onPolylinesSet : function() {
////						$("#dst").html(output);
////						//chuanAjax();
////						//progress.done();
////					}
////				});
////				transit.search(startAdd, endAdd);
////			}
//		});
	});		 
	</script>
	
	
    
</body>

</html>
